<template>
  <div>
    <div class="Fg-pho-card" :class="`is-${$attrs.shadow}-shadow`" :style="styleObj">
      <div class="Fg-pho-card__header">{{$attrs.header}}</div>
      <div class="Fg-pho-card__body">
        <phone-form-row-container :list.sync="list" :font="newStyle.font" v-bind="$attrs" />
      </div>
    </div>
  </div>
</template>
 
<script>
import { deepClone, toCamelCase } from "../../../utils/index";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-card",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      deepClone,
      toCamelCase,
    };
  },
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
.Fg-pho-card.is-always-shadow,
.Fg-pho-card.is-hover-shadow:focus,
.Fg-pho-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.Fg-pho-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  .Fg-pho-card__header {
    padding: 12px 16px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
  display: flex;
  flex-direction: column;

  .Fg-pho-card__body {
    overflow: auto;
  }
}
</style>